<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/global.css" />
    <link rel="stylesheet" href="css/main.css" />
    <title>状态管理MVP版</title>
  </head>
  <body>
    <main>
      <header class="intro">
        <h1 class="intro__heading">My ToDo</h1>
        <p class="intro__summary">
          记录每天任务的完成情况
        </p>
      </header>
      <section class="app">
        <section class="app__input">
          <h2 class="app__heading">已完成的任务：</h2>
          <div
            class="js-items"
            aria-live="polite"
            aria-label="A list of items you have done"
          ></div>
          <hr />
          <form class="js-form">
            <div>
              <label for="new-item-field">添加新任务</label>
              <input type="text" id="new-item-field" autocomplete="off" />
              <button type="submit"">添加</button>
            </div>
          </form>
        </section>
        <aside class="app__status">
          <p role="status" class="visually-hidden">
            恭喜恭喜㊗️，你已完成 <span class="js-status">1</span> 个任务
          </p>
          <div class="app__decor js-count " aria-hidden="true">
            <small>恭喜恭喜㊗️，你已完成</small>
            <span>0</span>
            <small>条任务 😢</small>
          </div>
        </aside>
      </section>
    </main>
    <script type="module" src="js/main.js"></script>
  </body>
</html>
